/*====================================
            SOCIAL RESPONSIBILITY
=====================================*/

.page{
    width:100%;
    min-height:auto;
}

/*====================================
            CONTAINER
=====================================*/

.hero{

    width:100%;

    max-width:1100px;

    margin:0 auto;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding:40px 30px 25px;

}

/*====================================
            LEFT SIDE
=====================================*/

.quote-area{

    width:420px;

    padding-top:10px;

}

.quote-mark{

    font-size:140px;

    color:#dddddd;

    line-height:90px;

    font-weight:600;

    margin-bottom:40px;

}

.quote-area h1{

    font-size:56px;

    line-height:1.25;

    color:#7d7d7d;

    font-weight:300;

}

/*====================================
            IMAGE
=====================================*/

.hero-image{

    width:450px;

}

.hero-image img{

    width:100%;

    display:block;

}

/*====================================
        CONTENT SECTION
=====================================*/

.csr-content{

    max-width:1100px;

    margin:0 auto;

    padding:0 30px;

}

.csr-content p{

    font-size:15px;

    line-height:2;

    color:#6a6a6a;

    margin-bottom:18px;

    text-align:justify;

}

.csr-content strong{

    color:#444;

    font-weight:600;

}

/*====================================
        DOWNLOAD
=====================================*/

.download-box{

    max-width:1100px;

    margin:45px auto;

    padding:0 30px;

}

.download-box a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#00c6c8;

    font-size:30px;

    font-weight:300;

}

.download-box i{

    color:#f3c428;

    font-size:38px;

}
/*=========================================
                FOOTER
==========================================*/



/*=========================================
            IMAGE EFFECT
==========================================*/

.hero-image{

    overflow:hidden;

}

.hero-image img{

    transition:.4s;

}

.hero-image img:hover{

    transform:scale(1.03);

}

/*=========================================
            DOWNLOAD
==========================================*/

.download-box a{

    transition:.35s;

}

.download-box a:hover{

    color:#009fa1;

    transform:translateX(8px);

}

/*=========================================
            SCROLLBAR
==========================================*/

::-webkit-scrollbar{

    width:9px;

}

::-webkit-scrollbar-track{

    background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

    background:#9a9a9a;

}

::-webkit-scrollbar-thumb:hover{

    background:#666;

}

/*=========================================
            RESPONSIVE
==========================================*/

@media(max-width:1200px){

.hero{

    flex-direction:column;

    gap:50px;

}

.hero-image{

    width:100%;

}

.hero-image img{

    width:100%;

}

.footer{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:991px){

.hero{

    padding:50px 25px;
    flex-direction:column;

}

.csr-content{

    padding:0 25px;

}

.download-box{

    padding:0 25px;

}

}

@media(max-width:768px){

.quote-area{

    width:100%;

}

.quote-area h1{

    font-size:38px;

}

.quote-mark{

    font-size:110px;

}

.footer{

    grid-template-columns:1fr;

    gap:35px;

}

.hero-image{

    width:100%;

}

}

@media(max-width:480px){

.logo{

    height:90px;

}

.logo img{

    width:130px;

}

.menu li a{

    padding:16px 10px;

    font-size:13px;

}

.hero{

    padding:35px 20px;

}

.csr-content{

    padding:0 20px;

}

.download-box{

    padding:0 20px;

}

.footer{

    padding:35px 20px;

}

.copyright{

    padding:15px 20px;

    text-align:center;

}

.quote-area h1{

    font-size:30px;

}

.quote-mark{

    font-size:90px;

}

}